<template>
  <div :class="rwClassName" :style="rwStyle">
    <CanvasRuler
      :vertical="vertical"
      :scale="scale"
      :width="width"
      :height="height"
      :start="start"
      :selectStart="selectStart"
      :selectLength="selectLength"
      :canvasConfigs="canvasConfigs"
      @onAddLine="handleNewLine"
      @onIndicatorShow="handleIndicatorShow"
      @onIndicatorMove="handleIndicatorMove"
      @onIndicatorHide="handleIndicatorHide"
    />
    <div v-show="isShowReferLine" class="currentLines">
      <LineRuler
        v-for="(v, i) in currentLines"
        :key="v + i"
        :index="i"
        :value="v >> 0"
        :scale="scale"
        :start="start"
        :thick="thick"
        :palette="palette"
        :vertical="vertical"
        :isShowReferLine="isShowReferLine"
        @onRemove="handleLineRemove"
        @onMouseDown="handleLineDown"
        @onRelease="handleLineRelease"
      />
    </div>
    <div v-show="showIndicator" class="indicator" :style="indicatorStyle">
      <div class="value">{{ value }}</div>
    </div>
  </div>
</template>

<script>
import LineRuler from "./line.vue";
import CanvasRuler from "./canvasRuler/canvasRuler.vue";
export default {
  name: "RulerWrapper",
  components: {
    CanvasRuler,
    LineRuler
  },
  props: {
    vertical: Boolean,
    scale: Number,
    width: Number,
    thick: Number,
    height: Number,
    start: Number,
    lines: Array,
    selectStart: Number,
    selectLength: Number,
    canvasConfigs: Object,
    palette: Object,
    isShowReferLine: Boolean,
    onShowRightMenu: Function,
    handleShowReferLine: Function
  },
  data() {
    return {
      isDraggingLine: false,
      showIndicator: false,
      currentLines: [],
      value: 0
    };
  },
  computed: {
    rwClassName() {
      const className = this.vertical ? "v-container" : "h-container";
      return className;
    },
    rwStyle() {
      const hContainer = {
        width: `calc(100% - ${this.thick}px)`,
        height: `${this.thick + 1}px`,
        left: `${this.thick}` + "px"
      };
      const vContainer = {
        width: `${this.thick + 1}px`,
        height: `calc(100% - ${this.thick}px)`,
        top: `${this.thick}` + "px"
      };
      return this.vertical ? vContainer : hContainer;
    },
    lineStyle() {
      return {
        borderTop: `1px solid ${this.palette.lineColor}`,
        cursor: this.isShowReferLine ? "ns-resize" : "none"
      };
    },
    indicatorStyle() {
      const indicatorOffset = (this.value - this.start) * this.scale;
      let positionKey = "top";
      let boderKey = "borderLeft";
      positionKey = this.vertical ? "top" : "left";
      boderKey = this.vertical ? "borderBottom" : "borderLeft";
      return {
        [positionKey]: indicatorOffset + "px",
        [boderKey]: `1px solid ${this.palette.lineColor}`
      };
    }
  },
  methods: {
    handleNewLine(value) {
      this.currentLines.push(value);
      this.$emit("onLineChange", this.currentLines, this.vertical);
      // !isShowReferLine && handleShowReferLine()
    },
    handleIndicatorShow(value) {
      if (!this.isDraggingLine) {
        this.showIndicator = true;
        this.value = value;
      }
    },
    handleIndicatorMove(value) {
      if (this.showIndicator) {
        this.value = value;
      }
    },
    handleIndicatorHide() {
      this.showIndicator = false;
    },
    handleLineDown() {
      this.isDraggingLine = true;
    },
    handleLineRelease(value, index) {
      this.isDraggingLine = false;
      // 左右或上下超出时, 删除该条对齐线
      const offset = value - this.start;
      const maxOffset = (this.vertical ? this.height : this.width) / this.scale;

      if (offset < 0 || offset > maxOffset) {
        this.handleLineRemove(index);
      } else {
        this.currentLines[index] = value;
        this.$emit("onLineChange", this.currentLines, this.vertical);
      }
    },
    handleLineRemove(index) {
      this.currentLines.splice(index, 1);
      this.$emit("onLineChange", this.currentLines, this.vertical);
    }
  }
};
</script>

<style lang="scss" scoped>
.line {
  position: absolute;
}

.h-container,
.v-container {
  position: absolute;
  background: #f7f7f7;

  .currentLines {
    pointer-events: none;
  }

  &:hover .currentLines {
    pointer-events: auto;
  }
}

.h-container {
  top: 0;

  .line {
    top: 0;
    height: 100vh;
    padding-left: 5px;

    .action {
      transform: translateX(-24px);

      .value {
        margin-left: 4px;
      }
    }
  }

  .indicator {
    top: 0;
    height: 100vw;

    .value {
      width: auto;
      padding: 0 2px;
      margin-top: 4px;
      margin-left: 4px;
    }
  }
}

.v-container {
  left: 0;

  .line {
    left: 0;
    width: 100vw;
    padding-top: 5px;

    .action {
      flex-direction: column;
      transform: translateY(-24px);

      .value {
        margin-top: 4px;
      }
    }
  }

  .indicator {
    width: 100vw;

    .value {
      left: 0;
      width: auto;
      padding: 0 2px;
      margin-top: -5px;
      margin-left: 2px;
      transform: rotate(-90deg);
      transform-origin: 0 0;
    }
  }
}
</style>
